<template>
	<view>
		<uni-nav-bar title="详情" left-icon="back" @clickLeft="$tab.back()" :fixed="true" :statusBar="true"
			:border="false"></uni-nav-bar>

		<div class="p-32">
			<div class="flex" v-if="detail">
				<image :src="detail.createUserTemp.avatar" class="avatar round" mode=""></image>
				<div class="ml-16" style="width: 622rpx;">
					<div class="flex justify-between items-start">
						<div class="">
							<div class="">{{detail.createUserTemp.nickName}}</div>
							<div class="text-24" style="color: #666666;">{{detail.createTime}}</div>
						</div>

						<div class="" style="color: #999999;">
							{{hidePhoneMiddle(detail.createUserTemp.phonenumber)}}
						</div>
					</div>

					<div class="mt-32">
						{{detail.detail}}
					</div>

					<div class="mt-24 flex items-center">
						<image :src="globalConfig.imagePrefix + i" mode="" v-for="(i,j) in detail.icons.split(',')"
							:key="j" class="prod"></image>
					</div>

					<div class="mt-32 flex items-center justify-between">
						<div class="" style="color: #FF343B;">
							<span>￥</span>
							<span class="text-36 font-500">{{detail.price}}</span>
						</div>
						
						<div class="zhihuan-btn text-FFF" v-if="detail.state == 1" @click="kefuShow = true">
							联系置换方
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		<u-popup :show="kefuShow" @close="kefuShow = false" bgColor="transparent" mode="center">
			<div class="kefu-box py-36 px-28 flex flex-col items-center" v-if="detail">
				<div class="text-32 font-500">
					联系客服
				</div>
		
				<div class="kefu-li py-12 flex flex-col items-center mt-44"
					@click="$modal.makePhone(detail.createUserTemp.phonenumber)">
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/img_dianhua@2x.png"
						class="image-96" mode=""></image>
					<div class="font-500">
						电话联系
					</div>
				</div>
		
				<div class="kefu-li py-12 flex flex-col items-center mt-28" @click="$modal.msg('正在开发中,敬请期待!')">
					<image
						src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/img_zaixiangoutong@2x.png"
						class="image-96" mode="">
					</image>
					<div class="font-500">
						在线沟通
					</div>
				</div>
			</div>
			<div class="mt-32 flex justify-around" @click="kefuShow = false">
				<u-icon name="close-circle" color="#FFF" size="40"></u-icon>
			</div>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalConfig:getApp().globalData.config,
				detail:null,
				kefuShow:false
			};
		},
		onLoad(e) {
			this.getDetail(e.id)
		},
		methods: {
			async getDetail(id) {
				const res = await this.$Api.substitution.substitutionDetail(id)
				this.detail = res.data
			},
			hidePhoneMiddle(phoneNumber) {
			    // 将电话号码转为字符串
			    phoneNumber = phoneNumber.toString();
			
			    // 确保电话号码长度足够，避免处理错误
			    if (phoneNumber.length !== 11) {
			        return "Invalid phone number";
			    }
			
			    // 隐藏中间四位
			    return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
			},
		}
	}
</script>

<style lang="scss">
	.avatar {
		width: 72rpx;
		height: 72rpx;
	}

	.prod {
		width: 192rpx;
		height: 192rpx;
		border-radius: 4rpx;
	}
	
	.zhihuan-btn {
		width: 200rpx;
		height: 68rpx;
		background: #FD8925;
		border-radius: 12rpx;
		line-height: 68rpx;
		text-align: center;
	}
</style>